@green: #31C27C;

html {
  font-size: 100px; /*1REM=100PX*/
}

html, body, .mainBox {
  position: relative;
  z-index: -3;
  height: 100%;
  overflow: hidden;
  background: #F4F4F4;
}

/*MAIN*/
.mainBox {
  position: relative;
  margin: 0 auto;
  max-width: 640px;

  .backgroundImg, .backgroundMark {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -2;

    box-sizing: border-box;
    width: 100%;
    height: 100%;
    filter: blur(6px);
  }

  .backgroundImg {
    width: auto;
  }

  .backgroundMark {
    z-index: -1;
    filter: none;
    background: rgba(0, 0, 0, 0.5);
    box-shadow: inset 0 0 .5rem .2rem #000;
  }
}

/*HEADER*/
.headerBox {
  position: relative;
  padding: .3rem;
  height: 1.2rem;
  overflow: hidden;
  background: rgba(0, 0, 0, .2);

  .pic {
    position: absolute;
    top: .3rem;
    left: .3rem;
    width: 1.2rem;
    height: 1.2rem;
  }

  .title {
    margin-left: 1.4rem;
    color: #FFF;

    h1, h2 {
      line-height: .6rem;
      font-size: .36rem;
      font-weight: normal;
    }
    h2 {
      font-size: .32rem;
    }
  }

  .playBtn {
    display: none;
    position: absolute;
    right: .3rem;
    top: 50%;
    margin-top: -.3rem;
    width: .6rem;
    height: .6rem;
    background: url("../img/music.svg") no-repeat;
    background-size: 100% 100%;

    &.move { /*.playBtn.move*/
      animation: musicMove 1s linear infinite both;
    }
  }
}

@keyframes musicMove {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/*FOOTER*/
.footerBox {
  margin: 0 .2rem;
  padding-bottom: .2rem;

  .progressBox {
    position: relative;
    height: .8rem;
    overflow: hidden;

    span {
      position: absolute;
      top: 0;
      width: .9rem;
      height: .8rem;
      line-height: .8rem;
      text-align: center;
      font-size: .24rem;
      color: rgba(255, 255, 255, .5);

      &.already {
        left: 0;
      }

      &.duration {
        right: 0;
      }
    }

    .progress {
      position: relative;
      margin: unit((.8-.04)/2, rem) auto;
      width: 4.2rem;
      height: .04rem;
      background: rgba(255, 255, 255, .5);

      .current {
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 100%;
        background: @green;
        transition: 1s;
      }
    }
  }

  .downLoadBtn {
    display: block;
    margin: 0 auto;
    width: 4.4rem;
    height: .9rem;
    line-height: .9rem;
    text-align: center;
    color: #FFF;
    font-size: .36rem;
    background: url("../img/sprite_play.png") no-repeat .2rem -5.86rem @green;
    background-size: .8rem 7rem;
    border-radius: .45rem; /*大小是高度的一半，就可以实现椭圆效果*/

    &:active {
      background-color: darken(@green, 20%); /*DARKEN:加深颜色 LIGHTEN:减轻颜色  基于这个我们可以给需要触发的按钮设置按下态*/
    }
  }
}

/*CONTENT*/
.contentBox {
  position: relative;
  margin: .4rem .2rem;
  /*height: ; 内容区域是不能固定的:一屏幕的高度-HEADER-FOOTER-MARGIN  WRAPPER的高度是内容撑开的，即使比CONTENT高也没有问题，因为已经做了溢出隐藏，后期控制WRAPPER在CONTENT中上下运动即可*/
  overflow: hidden;

  .wrapper {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    transition: .5s; /*当WRAPPER运动的时候可以有平缓的过渡效果*/

    p {
      line-height: .84rem;
      text-align: center;
      font-size: .32rem;
      color: rgba(255, 255, 255, 0.5);
      letter-spacing: .04rem;

      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;

      &.active {
        color: @green;
      }
    }
  }
}